<template>
  <div class="chu">
    <Backheader :title="chu"></Backheader>
    <van-notice-bar color="#fff" background="orange" left-icon="info-o">
      温馨提示:提交审批后,将有上级领导进行审批！
    </van-notice-bar>
    <div class="section">
      <van-cell
        is-link
        title="开始时间"
        :value="startTime"
        @click="startShow = true"
      />
      <van-action-sheet v-model:show="startShow" title="开始时间">
        <van-datetime-picker
          @confirm="confirmFun"
          @cancel="cancelFun"
          v-model="currentDate"
          type="datehour"
          title="选择年月日小时"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-action-sheet>
      <van-cell is-link title="结束时间" :value="endTime" @click="endShowFun" />
      <van-action-sheet v-model:show="endShow" title="结束时间">
        <van-datetime-picker
          @confirm="confirmFun1"
          @cancel="cancelFun1"
          v-model="currentDate"
          type="datehour"
          title="选择年月日小时"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-action-sheet>
      <van-cell :border="false" title="需要时长" :value="needtime" />
      <van-notice-bar
        wrapable
        background="#fff"
        :scrollable="false"
        text="请先选择开始时间和结束时间后需要时长自动计算,请假时长将列为考勤统计"
      />
      <van-cell is-link title="出发地点" :value="goplace" @click="goFun" />
      <van-cell is-link title="外出地点" :value="toplace" @click="toFun" />
      <div class="vehicle">
        <div>交通工具</div>
        <div>
          <van-tag
            class="tag"
            plain
            type="primary"
            :class="v.isShow ? 'on' : ''"
            v-for="(v, i) in chuArr"
            @click="tagFun(v)"
            :key="i"
            >{{ v.name }}</van-tag
          >
        </div>
      </div>
      <van-field v-model="inputgo" placeholder="请输入地名" />

      <van-cell
        :border="false"
        title="出差事由"
        :required="true"
        :value="evection"
      />
      <van-field
        v-model="message"
        rows="2"
        autosize
        ref="textarea"
        type="textarea"
        maxlength="160"
        placeholder="请输入请假理由！"
        show-word-limit
      />
      <div>
        <p class="p">同行人员</p>
        <div class="div_Send">
          <div class="approver" v-for="(v, i) in tongArr" :key="i">
            <p class="approver_p">{{ v }}</p>
            <span @click="spanFun2(v, i)">x</span>
          </div>
          <div class="Send" @click="isShowFun2">添加人</div>
        </div>
      </div>
      <van-cell :border="false" title="图片上传" />
      <div>
        <van-field name="uploader">
          <template #input>
            <van-uploader v-model="imgArr" :after-read="afterRead" />
          </template>
        </van-field>
      </div>
      <div>
        <p class="p">审批流程</p>
        <div class="div_Send">
          <div class="approver" v-for="(v, i) in shenArr" :key="i">
            <p class="approver_p">{{ v }}</p>
            <span @click="spanFun(v, i)">x</span>
          </div>
          <div class="Send" @click="isShowFun">添加人</div>
        </div>
      </div>
      <div>
        <p class="p">抄送人员</p>
        <div class="div_Send">
          <div class="approver" v-for="(v, i) in songArr" :key="i">
            <p class="approver_p">{{ v }}</p>
            <span @click="spanFun1(v, i)">x</span>
          </div>
          <div class="Send" @click="isShowFun1">添加人</div>
        </div>
      </div>
      <!-- 审批，抄送，同行人员遮罩层 -->
      <van-overlay :show="isShow" @click="isShow = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <p>{{ title }}</p>
            <van-cell-group v-if="title!=='添加审批人'?true:false">
              <van-field
                v-model="valueInput"
                label="姓名"
                placeholder="请输入名字"
              />
            </van-cell-group>
            <van-checkbox-group v-if="title==='添加审批人'?true:false" v-model="checked" direction="horizontal">
              <van-checkbox name="admin">admin</van-checkbox>
              <van-checkbox name="吴昊">吴昊</van-checkbox>
              <van-checkbox name="zwj">zwj</van-checkbox>
              <van-checkbox name="张钞票">张钞票</van-checkbox>
                <van-checkbox name="田振宇">田振宇</van-checkbox>
            </van-checkbox-group>
            <div class="btns">
              <van-button block @click="isShow = false">取消</van-button>
              <van-button block type="primary" @click="isShowque"
                >确认</van-button
              >
            </div>
          </div>
        </div>
      </van-overlay>
      <!-- 出差地点、外出地点遮罩层 -->
      <van-overlay :show="addisShow" @click="addisShow = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <p>{{ addTitle }}</p>
            <van-cell-group>
              <van-field
                v-model="inputgo1"
                label="地名"
                placeholder="请输入地名"
              />
            </van-cell-group>
            <div class="btns">
              <van-button block @click="addisShow = false">取消</van-button>
              <van-button block type="primary" @click="addisShowque"
                >确认</van-button
              >
            </div>
          </div>
        </div>
      </van-overlay>
    </div>
    <footer>
      <van-button type="primary" @click="subFun" block>提交申请</van-button>
    </footer>
  </div>
</template>
<script>
import { Toast, Notify } from "vant";
import Backheader from "../../components/backHeader";
import { ref, toRefs } from "vue";
import moment from "moment";
import { addlist, updated,list } from "../../api/evection";
import { useStore } from "vuex";
export default {
  data() {
    return {};
  },
  components: {
    Backheader,
  },
  setup() {
    const store = useStore();
    const { login } = toRefs(store.state.module);
    const startTime = ref("请选择开始时间"); //开始时间
    const endTime = ref("请选择结束时间"); //结束时间
    const needtime = ref("选择后自动计算"); //需要时长
    const currentDate = ref(new Date()); //创建时间
    const message = ref(""); //出差事由textarea
    const goplace = ref("请输入出发地点"); //出发地点
    const toplace = ref("请输入外出地点"); //到达地点
    const evection = ref("请输入外出地点"); //出差事由
    const startShow = ref(false); //开始
    const endShow = ref(false); //结束
    const isShow = ref(false); //遮罩层
    const addisShow = ref(false); //出发外出地点
    const inputgo1 = ref(""); //出发地input
    const addTitle = ref(""); //出发地标题
    const inputgo = ref(""); //交通工具
    const title = ref(""); //添加标题
    const imgArr = ref([]); //图片数组
    const valueInput = ref(""); //添加人input
    const shenArr = ref([]); //添加审核人数组
    const songArr = ref([]); //添加送抄人数组
    const tongArr = ref([]); //添加同行人员数组
    const checked = ref([])//审核人多选

    const chuArr = ref([
      { name: "汽车", isShow: false },
      { name: "飞机", isShow: false },
      { name: "火车", isShow: false },
      { name: "其他", isShow: false },
    ]);
    let chu = ref("出差申请");
    const page=ref(1)
    const limit=ref(20)
    const name=ref('')
    const time = ref("");
    // tag
    const tagFun = (val) => {
      chuArr.value.forEach((v) => {
        v.isShow = false;
        if (v.name == val.name) {
          v.isShow = true;
          inputgo.value = v.name;
          if (v.name == "其他") {
            inputgo.value = "";
          }
        }
      });
    };
    // 点击结束时间
    const endShowFun = () => {
      console.log(startTime.value);
      if (startTime.value === "请选择开始时间") {
        Notify("请选择开始时间");
      } else {
        endShow.value = true;
      }
    };
    // 点击返回
    const onClickLeft = () => Toast("返回");
    // 开始时间点击确认
    const confirmFun = (val) => {
      time.value = val;
      startTime.value = moment(val).format("YYYY-MM-DD hh:mm:ss");
      startShow.value = false;

      if (endTime.value !== "请选择结束时间") {
        if (startTime.value >= endTime.value) {
          Toast.fail("时间冲突,请重新选择", { duration: 1000 });
          startTime.value = "请选择开始时间";
          needtime.value = "";
        } else {
          needtime.value = timeNum(startTime.value, endTime.value);
        }
      }
    };
    // 结束时间点击确认
    const confirmFun1 = (val) => {
      endTime.value = moment(val).format("YYYY-MM-DD hh:mm:ss");
      endShow.value = false;
      if (val.getTime() <= time.value.getTime()) {
        Toast.fail("时间冲突,请重新选择", { duration: 1000 });
        endTime.value = "请选择结束时间";
        needtime.value = "";
      } else {
        needtime.value = timeNum(startTime.value, endTime.value);
      }
    };
    // 开始时间点击取消
    const cancelFun = () => {
      startShow.value = false;
    };
    // 结束时间点击取消
    const cancelFun1 = () => {
      endShow.value = false;
    };
    // 添加审批人
    const isShowFun = () => {
      title.value = "添加审批人";
      isShow.value = true;
      valueInput.value = "";
    };
    // 自动计算时间
    const timeNum = (a, b) => {
      let timeStarts = new Date(a).getTime(); //开始时间
      let timeEnds = new Date(b).getTime(); //结束时间
      let timer = timeEnds - timeStarts;
      let mouth = parseInt(timer / 1000 / 60 / 60 / 24 / 30);
      let day = parseInt(timer / 1000 / 60 / 60 / 24);
      let hours = parseInt((timer / 1000 / 60 / 60) % 24);
      let minutes = parseInt((timer / 1000 / 60) % 60);
      let seconds = parseInt((timer / 1000) % 60);

      let str =
        supplement(day) +
        "天" +
        supplement(hours) +
        ":" +
        supplement(minutes) +
        ":" +
        supplement(seconds);
      return str;
    };
    const supplement = (timer) => {
      if (timer < 10) {
        return (timer = "0" + timer);
      } else {
        return timer;
      }
    };
    // 点击添加的确认按钮
    const isShowque = () => {
        checked.value.slice(0,checked.length)
        if(checked.length!==0){
            if (title.value == "添加审批人") {
                isShow.value = false;
                checked.value.forEach((v,i)=>{
                    if (shenArr.value.length == 0) {
                        shenArr.value.push(v)
                    }else{
                        shenArr.value.forEach((j,k)=>{
                            if (!shenArr.value.includes(v)) {
                                shenArr.value.push(v)
                            }
                        })
                    }
                })
            } 
        }
        if (valueInput.value !== "") {
            if (title.value == "添加同行人员") {
                isShow.value = false;
                tongArr.value.push(valueInput.value);
            } else {
                isShow.value = false;
                songArr.value.push(valueInput.value);
            }
        }
    };
    // 点击添加审批人x关闭
    const spanFun = (val, index) => {
        checked.value.splice(index,1);
        shenArr.value.splice(index, 1);
    };
    const spanFun1 = (val, index) => {
      songArr.value.splice(index, 1);
    };
    const spanFun2 = (val, index) => {
      tongArr.value.splice(index, 1);
    };
    // 添加送抄人
    const isShowFun1 = () => {
      title.value = "添加送抄人";
      isShow.value = true;
      valueInput.value = "";
    };
    // 添加同行人员
    const isShowFun2 = () => {
      title.value = "添加同行人员";
      isShow.value = true;
      valueInput.value = "";
    };
    // 点击出发地点
    const goFun = () => {
      addTitle.value = "出发地点";
      addisShow.value = true;
      inputgo1.value = "";
    };
    // 点击外出地点
    const toFun = () => {
      addTitle.value = "外出地点";
      addisShow.value = true;
      inputgo1.value = "";
    };
    // 点击确认
    const addisShowque = () => {
      if (inputgo1.value !== "") {
        if (addTitle.value === "出发地点") {
          goplace.value = inputgo1.value;
          addisShow.value = false;
        } else {
          toplace.value = inputgo1.value;
          addisShow.value = false;
        }
      }
    };
    // 点击上传图片
    const afterRead = (file) => {
      var formdata = new FormData();
      formdata.append("file", file.file);
      formdata.append("pid", 0);
      updated(formdata).then((res) => {
        if (res.status == 200) {
          Toast.success("上传成功");
        } else {
          Toast.fail("上传失败");
        }
      });
    };
    const subFun = () => {
      let username = login._object.login;
      let sends = songArr.value.join(",");
      let approvals = shenArr.value.join(",");
      let peers = tongArr.value.join(",");
      addlist({
        proposer: username,
        leaveTime: startTime.value,
        endTime: endTime.value,
        needTime: needtime.value,
        place: goplace.value,
        goOut: toplace.value,
        vehicle: inputgo.value,
        evection: message.value,
        peer: peers,
        approval: approvals,
        send: sends,
        imgsArr: imgArr,
      }).then((res) => {
        if (res.status == 200) {
          Toast.success("提交成功");
          message.value = "";
          startTime.value = "请选择开始时间"; //开始时间
          endTime.value = "请选择结束时间"; //结束时间
          needtime.value = "选择后自动计算"; //需要时长
          goplace.value='请输入出发地点'
          toplace.value='请输入外出地点'
          inputgo.value = ""; //交通工具
          imgArr.value = []; //图片数组
          valueInput.value = ""; //添加人input
          shenArr.value = []; //添加审核人数组
          songArr.value = []; //添加送抄人数组
          tongArr.value = []; //添加同行人员数组
          chuArr.value.forEach((v) => {
            v.isShow = false;
          });
          checked.value=[]
        } else {
          Toast.fail("提交失败");
          message.value = "";
          startTime.value = "请选择开始时间"; //开始时间
          endTime.value = "请选择结束时间"; //结束时间
          needtime.value = "选择后自动计算"; //需要时长
          goplace.value='请输入出发地点'
          toplace.value='请输入外出地点'
          inputgo.value = ""; //交通工具
          imgArr.value = []; //图片数组
          valueInput.value = ""; //添加人input
          shenArr.value = []; //添加审核人数组
          songArr.value = []; //添加送抄人数组
          tongArr.value = []; //添加同行人员数组
          chuArr.value.forEach((v) => {
            v.isShow = false;
          });
          checked.value=[]
        }
      });
    };

    return {
      chu,isShow,startTime,endTime,evection,
      startShow,endShow,goplace,toplace,message,needtime,
      imgArr,title,currentDate,valueInput,shenArr,songArr,
      tongArr,addisShow,checked,inputgo, addTitle, chuArr,inputgo1,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      onClickLeft,confirmFun,confirmFun1,cancelFun,cancelFun1,isShowFun,
      isShowque,goFun,toFun,spanFun,spanFun1,spanFun2,
      isShowFun1,isShowFun2, addisShowque,tagFun,subFun,afterRead,endShowFun,
    };
  },
};
</script>
<style lang="scss" scoped>
.chu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  .section {
    flex: 1;
    overflow: auto;
    font-size: 16px;
  }
}
.vehicle {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 15px;
  font-size: 13.6px;
  justify-content: space-between;
  .tag {
    margin-right: 10px;
  }
}
.on {
  color: white;
  background: #0e9cff;
}
.p {
  margin-left: 20px;
}
.div_Send {
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
}
.Send {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.ont{
    display: block;
}
.ont1{
    display: none;
}
.approver {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0e9cff;
  color: #fff;
  position: relative;
  font-size: 12px;
  margin-right: 20px;
  p {
    line-height: 24px;
    text-align: center;
    overflow: hidden;
  }
  span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.approver_p {
  width: 100%;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0 30px;
}

.block {
  width: 100%;
  height: 200px;
  background-color: #fff;
  border-radius: 8%;
  p {
    width: 100%;
    margin: 15px 0;
    text-align: center;
  }
  .btns {
    width: 100%;
    display: flex;
    margin: 30px 0 20px 0;
  }
}
.section::-webkit-scrollbar {
  display: none;
}
footer {
  width: 100%;
}
</style>